<template>
<!-- 注意：
日期要用日期格式写，例如：2020-01-22
点赞要用数字，例如：1,2,3,4……
 -->
  <div>
    <el-button @click="drawer = true" type="primary" style="margin-left: 30px;margin-bottom: 20px">
      添加
    </el-button>

    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <el-input class="a1" v-model="input1" placeholder="内容"></el-input>
      <el-input class="a1" v-model="input2" placeholder="标题"></el-input>
      <el-input class="a1" v-model="input3" placeholder="时间"></el-input>
      <el-input class="a1" v-model="input4" placeholder="用户名"></el-input>
      <el-input class="a1" v-model="input5" placeholder="点赞"></el-input>

      <br />
      <el-button class="a2" plain @click="open1"> 确认添加 </el-button>
    </el-drawer>



    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="id" width="180">
        <template slot-scope="scope">
          <!-- <i class="el-icon-time"></i> -->
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="内容" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.contents }}</span>
        </template>
      </el-table-column>
      <el-table-column label="标题" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.titles }}</span>
        </template>
      </el-table-column>
      <el-table-column label="时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.cretatime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="点赞" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.num }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
   @click="deled(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>


    <!-- 分页未写 -->

    <div class="a4">
<el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

    </div>

 </div>
</template>
<style scoped>
.a4{
  margin-left: 450px;
  margin-top: 30px;
}
.a2 {
  margin-top: 20px;
  margin-left: 60px;
  width: 60%;
  background: #409eff;
}
.div1 {
  width: 400px;
  height: 350px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 200px;
  left: 650px;
}
.a1 {
  width: 80%;
  margin-top: 20px;
  margin-left: 20px;
}
.box3 {
  width: 105%;
}
</style>
<script>
export default {
  data() {
    return {
      tableData: [],
      drawer: false,
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      input5: "",
    };
  },
  created() {
  this.fun()
  },
  methods: {
    // 删除
    deled(a) {
      let del = {
        id: a,
      };

      if (confirm("确定要删除吗") == true) {
         this.$apiGet(
        "https://goods.zzgoodqc.cn/index.php/index/News/delNews",
        del
      ).then((res) => {
        console.log(res);
  this.fun()
      });
      } else {
        return false;
      }
},
// 获取列表
     fun(){
        this.$apiGet(
      "https://goods.zzgoodqc.cn/index.php/index/News/newsList"
    ).then((res) => {

      // console.log(res.data.data);
      this.tableData = res.data.data;
      console.log(this.tableData);
    });
   },
    // 确认添加
    tianjia() {},
    open1() {
      this.$notify({
        title: "成功添加",
        message: "以成功确认添加这条消息",
        type: "success",
      });
      var obj = {
        titles: this.input1,
        contents: this.input2,
        cretatime: this.input3,
        username: this.input4,
        num: this.input5,
        type: 1,
      };
      this.$apiGet(
        "https://goods.zzgoodqc.cn/index.php/index/News/addNews",
        obj
        //
      ).then((res) => {
        console.log(res);
        this.fun()
      });
    },
  },
};
</script>
